<script setup>
    import {defineProps, nextTick, ref, watch} from 'vue'
    import {Chart} from '@antv/g2';

    const pops = defineProps({
        data: Array
    })
    const chartEle = ref(null)
    const initChart = () => {
        chartEle.value = new Chart({
            container: 'chartBookCate',
            autoFit: true,
            height: 380,
        });
        chartEle.value
            .interval()
            .coordinate({ transform: [{ type: 'transpose' }] })
            .data(pops.data)
            .axis('x',{title:null,labelFill:'#ffffff'})
            .axis('y',{title:null,labelFill:'#ffffff'})
            .style('fill','#00effb')
        chartEle.value.options({
            encode: {x: 'category_name', y: 'count'},//, color: 'genre'
            legend:false
        })
        chartEle.value.render();
    }

    watch(
        () => pops.data,
        (newVal, oldVal) => {
            if (newVal === oldVal) return
            if (newVal.length < 1) return
            //chartEle.value.changeData(pops.data)
            if (oldVal.length > 0) chartEle.value.destroy()
            nextTick(initChart)
        },
        {deep: true}
    );
</script>

<template>
    <div>
        <div id="chartBookCate"></div>
    </div>
</template>

<style scoped>
    .chart-content > div{
        min-width: 100%;
    }
</style>